<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>
    <div id="div">暂无数据</div>
    <button>获取数据</button>
    <script>
        // 1.$.get()  只能发get请求
        // $.get("http://localhost:8080/user?keyword=小&page=100", 
        // (data,status,xhr)=> {
        //     console.log("后台数据",data);
        //     console.log("请求状态" ,status);    //请求状态
        //     console.log(xhr);       // jQuery封装的xhr
        // });

        // #region 可以折叠
        // 2.$.ajax() 通用请求，任何请求都可以通过它发送
        // $.ajax({
        //     url:"http://localhost:8080/user",
        //     method:"GET",
        //     success:function (data) {   // 返回给前台显示
        //         console.log("成功", data);
        //     },
        //     error:function (err) {
        //         console.log("失败", err);
        //     },
        //     complete:function () {
        //         console.log("成功失败都执行这个complete方法");
        //     }
        // });

        // #region
        // $("button").click(() => {
        //     $.ajax({
        //         url: "http://localhost:8080/user",
        //         method: "GET",
        //         success: function (data) { // 返回给前台显示
        //             console.log("成功", data);
        //             $("#div").text(JSON.stringify(data));   // 将JSON对象数据转换为字符串
        //         },
        //         error: function (err) {
        //             console.log("失败", err);
        //         },
        //         complete: function () {
        //             console.log("成功失败都执行这个complete方法");
        //         }
        //     });
        // });

        // #region
        // ajax GET请求方式二： 设置Content-Type 请求头
        $.ajax({
            url: "http://localhost:8080/user",
            method: "GET",
            data: {
                keyword:"关键字",
                page:1,
                size:10,
            },  // GET请求 jQuery默认会将data属性携带的参数 拼接到url后面
            // http://localhost:8080/user?
            // keyword=关键字&page=1&size=10
            success: function (data) { // 返回给前台显示
                console.log("成功", data);
                $("#div").text(JSON.stringify(data)); // 将JSON对象数据转换为字符串
            },
            error: function (err) {
                console.log("失败", err);
            },
            complete: function () {
                console.log("成功失败都执行这个complete方法");
            }
        });
    </script>
</body>

</html>